<template>
<div class="mycar-wrapper">

  <carTitle :isShow1="isShow1" :isShow2="isShow2" :isShow3="isShow3">
    <span slot="title-one" class="title-one">运力认证</span>
    <span slot="title-two" class="title-two">运力认证说明说明</span>
  </carTitle>

  <div class="mycar-body">
    <el-row :gutter="20" style="margin: 0">
      <el-col :span="23" class="body-wrapper">
        <!--  输入框1-->
        <el-row :gutter="20">
          <el-col :spam="24" class="ver-title-box">
            <span class="ver-title">第一步：司机认证</span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-row>
              <el-col :span="9" class="input-title">注册手机号</el-col>
              <el-col :span="15">
                <el-input v-model="inputa" placeholder="请输入注册手机号"></el-input>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-row>
              <el-col :span="9" class="input-title">司机姓名</el-col>
              <el-col :span="15">
                <el-input v-model="inputb" placeholder="请输入司机姓名"></el-input>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="6">
            <el-row>
              <el-col :span="9" class="input-title">身份证号</el-col>
              <el-col :span="15">
                <el-input v-model="inputc" placeholder="请输入身份证号"></el-input>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="6">
            <el-row>
              <el-col :span="9" class="input-title">车牌号</el-col>
              <el-col :span="15">
                <el-input v-model="inputd" placeholder="请输入车牌号"></el-input>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="6">
            <el-row>
              <el-col :span="9" class="input-title">车型</el-col>
              <el-col :span="15">
                <el-input v-model="inpute" placeholder="请输入车型"></el-input>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-row>
              <el-col :span="9" class="input-title">车长</el-col>
              <el-col :span="15">
                <el-input v-model="inputf" placeholder="请输入车长"></el-input>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="6">
            <el-row>
              <el-col :span="9" class="input-title">吨位</el-col>
              <el-col :span="15">
                <el-input v-model="inputg" placeholder="请输入吨位"></el-input>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="6">
            <el-row>
              <el-col :span="9" class="input-title">车宽</el-col>
              <el-col :span="15">
                <el-input v-model="inputh" placeholder="请输入车宽"></el-input>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="6">
            <el-row>
              <el-col :span="9" class="input-title">车高</el-col>
              <el-col :span="15">
                <el-input v-model="inputi" placeholder="请输入车高"></el-input>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-row>
              <el-col :span="9" class="input-title">期望流向</el-col>
              <el-col :span="15">
                <el-input v-model="inputj" placeholder="请输入期望流向"></el-input>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <!--第二部-->
        <el-row>
          <hr>
        </el-row>
        <el-row :gutter="20">
          <el-col :spam="24" class="ver-title-box">
            <span class="ver-title">第二步：收款信息</span>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="6">
            <el-row>
              <el-col :span="9" class="input-title">收款人姓名</el-col>
              <el-col :span="15">
                <el-input v-model="inputk" placeholder="请输入收款人姓名"></el-input>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="6">
            <el-row>
              <el-col :span="9" class="input-title">收款银行</el-col>
              <el-col :span="15">
                <el-input v-model="inputl" placeholder="请输入收款银行"></el-input>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="6">
            <el-row>
              <el-col :span="9" class="input-title">银行卡号</el-col>
              <el-col :span="15">
                <el-input v-model="inputm" placeholder="请输入银行卡号"></el-input>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="6">
            <el-row>
              <el-col :span="9" class="input-title">开户行</el-col>
              <el-col :span="15">
                <el-input v-model="inputn" placeholder="请输入开户行"></el-input>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-row>
              <el-col :span="9" class="input-title">联系手机</el-col>
              <el-col :span="15">
                <el-input v-model="inputo" placeholder="请输入联系手机"></el-input>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="6">
            <el-row>
              <el-col :span="9" class="input-title">开户行省份</el-col>
              <el-col :span="15">
                <el-input v-model="inputp" placeholder="请输入开户行省份"></el-input>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="6">
            <el-row>
              <el-col :span="9" class="input-title">开户行城市</el-col>
              <el-col :span="15">
                <el-input v-model="inputq" placeholder="请输入开户行城市"></el-input>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <!--第三部-->
        <el-row>
          <hr>
        </el-row>
        <el-row :gutter="20">
          <el-col :spam="24" class="ver-title-box">
            <strong class="ver-title">第三步：照片上传</strong>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="3" :offset="1">
            <div class="grid-content bg-purple">
              <div class="pic">
                <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                  <img v-if="imageUrla" :src="imageUrla" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </div>
              <p class="pic-title">图片文字</p>
            </div>
          </el-col>
          <el-col :span="3">
            <div class="grid-content bg-purple">
              <div class="pic">
                <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                  <img v-if="imageUrlb" :src="imageUrlb" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </div>
              <p class="pic-title">图片文字</p>
            </div>
          </el-col>
          <el-col :span="3">
            <div class="grid-content bg-purple">
              <div class="pic">
                <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                  <img v-if="imageUrlc" :src="imageUrlc" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </div>
              <p class="pic-title">图片文字</p>
            </div>
          </el-col>
          <el-col :span="3">
            <div class="grid-content bg-purple">
              <div class="pic">
                <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                  <img v-if="imageUrld" :src="imageUrld" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </div>
              <p class="pic-title">图片文字</p>
            </div>
          </el-col>
          <el-col :span="3">
            <div class="grid-content bg-purple">
              <div class="pic">
                <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                  <img v-if="imageUrle" :src="imageUrle" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </div>
              <p class="pic-title">图片文字</p>
            </div>
          </el-col>
          <el-col :span="3">
            <div class="grid-content bg-purple">
              <div class="pic">
                <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                  <img v-if="imageUrlf" :src="imageUrlf" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </div>
              <p class="pic-title">图片文字</p>
            </div>
          </el-col>
          <el-col :span="3">
            <div class="grid-content bg-purple">
              <div class="pic">
                <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                  <img v-if="imageUrlg" :src="imageUrlg" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </div>
              <p class="pic-title">图片文字</p>
            </div>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="6" :offset="8" style="margin-top: 20px">
            <el-button type="success" id="succ-btn">成功按钮</el-button>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24" class="text">
            <h3 class="text-head">业务说明</h3>
            <div class="text-text">
              1、由各打包站自行组织货源。打包站根据不同造纸几点看法了肌肤抵抗垃圾房间开的积分卡垃圾觉得卡了坚决反对卡了房间发的时刻撒酒疯客服打垃圾垃圾发的斯科拉房间减肥撒打开连接放假撒打开了减肥撒打开了就看到发生了
            </div>
            <div class="text-text">
              2、牵线垫资销售方式，中再资和中上游企业签订供货合同多发几分开了多久发的刷卡积分减肥放大话费卡来房间撒离开房间飞洒到了卡积分卡了撒可理解发的撒打开连接发到手机啊快乐就看到了伐减肥的撒快乐；
            </div>
          </el-col>
        </el-row>

      </el-col>

    </el-row>
  </div>


</div>
</template>

<script>
import carTitle from '@/components/car-title'
import selection from '@/components/select'
export default {
  components: {
    carTitle,
    selection
  },
  data() {
    return {
      imageUrla: '', imageUrlb: '', imageUrlc: '', imageUrld: '', imageUrle: '', imageUrlf: '', imageUrlg: '',
      isShow1: false,
      isShow2: false,
      isShow3: true,
      input: '',
      inputa: '',
      inputb: '',
      inputc: '',
      inputd: '',
      inpute: '',
      inputf: '',
      inputg: '',
      inputh: '',
      inputi: '',
      inputj: '',
      inputk: '',
      inputl: '',
      inputm: '',
      inputn: '',
      inputo: '',
      inputp: '',
      inputq: '',
      inputr: ''
    }
  },
  methods: {
    deleteRow(index, rows) {
      rows.splice(index, 1);
    },
    noteshow() {
      this.noteShow = !this.noteShow;
    },
    handleAvatarSuccess(res, file) {
        console.log(res)
        console.log(file)
      this.imageUrla = URL.createObjectURL(file.raw);
      this.imageUrlb = URL.createObjectURL(file.raw);
      this.imageUrlc = URL.createObjectURL(file.raw);
      this.imageUrld = URL.createObjectURL(file.raw);
      this.imageUrle = URL.createObjectURL(file.raw);
      this.imageUrlf = URL.createObjectURL(file.raw);
      this.imageUrlg = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    }

  }

}
</script>
<style lang="scss" scoped>
.el-date-editor.el-input {
    width: 100%;
}

.title {
    padding: 35px 0 33px 30px;
    .title-one {
        font-size: 20px;
        line-height: 20px;
        font-weight: 700;
        color: #3149a9 !important;
    }
    .title-two {
        line-height: 20px;
        font-size: 14px;
        color: #8b9aaf;
    }
    i {
        font-size: 20px;
        font-weight: 700;
        color: #acafc2;
    }
}

.mycar-wrapper {
    background-color: #fafbff;

}

.body-wrapper {
    background: #ffffff;
    margin-left: 30px;
    padding: 0 20px 30px;
    border: 1px solid #e7e8ed;
    .el-checkbox__inner:nth-child(1) {
        border-radius: 50%;
        border: 1px solid red !important;
    }
    .el-row {
        margin: 5px 0;
    }
    .el-button {
        /*background-color: #3052ac;*/
    }
    #find {
        width: 100%;
        background-color: #3052ac;
        outline: none;

    }
    .input-title {
        line-height: 36px;
        text-align: right;
        height: 36px;
        padding-right: 10px;
        font-size: 14px;
        font-weight: 700;
        color: #848bbf;
        /*  text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;*/
    }
    hr {
        height: 2px;
        background-color: #F5F6FB;
        color: #F5F6FB;
        border: 0;
    }
}

.ver-title {
    font-size: 18px;
    font-weight: bolder !important;
    color: #39579E;
    padding-left: 20px;
}
.ver-title-box {
    // margin: 20px 0;
    padding: 20px 10px;
}

.pic {
    width: 100px;
    height: 100px;
    // background-color: gray;
    // border: 1px pink solid;
    margin: 5px auto;
}
.pic-title {
    text-align: center;
    line-height: 2;
    font-size: 14px;
}
#succ-btn {
    width: 100%;
    margin: 0 auto;
}
.text {
    margin-top: 50px;
    border: 1px solid palevioletred;
    background-color: #FFFCFD;
    /*height: 100px;*/
}
.text-text {
    padding: 0 20px;
    font-size: 12px;
    line-height: 2.5;
    color: darkslategray;
}
.text-head {
    line-height: 2;
    padding-left: 20px;
    color: dimgray;
    border-bottom: 1px solid deeppink;
}

.avatar-uploader .el-upload {
    border: 1px dashed gray;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 100%;
}
.avatar-uploader .el-upload:hover {
    border-color: #20a0ff;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    //  width: 178px;
    //  height: 178px;
    width: 100%;
    height: 100%;
    line-height: 100px;
    text-align: center;
}
.avatar {
    width: 100%;
    height: 100%;
    display: block;
}

  .avatar-uploader{
    border: 1px dashed grey;
    border-radius: 5px;
      text-align: center;
  }
</style>
